pnpmを使って作成したVite + Remixプロジェクトをコンテナ環境で起動してみた

#Remix

nokomoro3

2024.09.23

こんちには。

データ事業本部インテグレーション部機械学習チームの中村( @nokomoro3 )です。

今回はpnpmを使って作成したVite + Remixなプロジェクトをコンテナイメージにして起動してみたいと思います。

実行環境

実行環境は以下となります。

OS: Windows 10 / WSL2 / Ubuntu 24.04 LTS
Node.js : v20.17.0
pnpm : 9.11.0
docker : Docker version 24.0.7-rd, build 72ffacf

インストール方法は以下を参考にしています。

やってみる

プロジェクトの作成

まずはプロジェクトを作成します。

pnpm create vite sample-app

いくつかターミナル上で回答が必要なため、以下のように入力します。

✔ Select a framework: › React
✔ Select a variant: › Remix ↗

 remix   v2.12.1 💿 Let's build a better website...
      ◼  Directory: Using sample-app as project directory

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with pnpm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./sample-app
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

以下のようなファイルが作成されました。

tree sample-app

# sample-app
# ├── README.md
# ├── app
# │   ├── entry.client.tsx
# │   ├── entry.server.tsx
# │   ├── root.tsx
# │   ├── routes
# │   │   └── _index.tsx
# │   └── tailwind.css
# ├── node_modules/
# ├── package.json
# ├── pnpm-lock.yaml
# ├── postcss.config.js
# ├── public
# │   ├── favicon.ico
# │   ├── logo-dark.png
# │   └── logo-light.png
# ├── tailwind.config.ts
# ├── tsconfig.json
# └── vite.config.ts

開発サーバーの起動

動作確認のため、開発サーバーを起動してみます

cd sample-app
pnpm dev

# > remix vite:dev
# 
#   ➜  Local:   http://localhost:5173/
#   ➜  Network: use --host to expose
#   ➜  press h + enter to show help

http://localhost:5173/ にアクセスすると以下の画面が確認できます。

remix-container-build_2024-09-23-11-05-22

Dockerfileの作成

次に以下のpnpmのページにしたがって、Dockerfileを作成します。

Working with Docker | pnpm

FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /app

FROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

FROM base AS build
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build

FROM base
COPY --from=prod-deps /app/node_modules /app/node_modules

# distをbuildに書き換え
COPY --from=build /app/build /app/build

# 8000から3000に書き換え
EXPOSE 3000
CMD [ "pnpm", "start" ]